<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>心理健康量表填写</title>
	<meta name="description"
		content="Morphing Buttons Concept: Inspiration for revealing content by morphing the action element" />
	<meta name="keywords" content="expanding button, morph, modal, fullscreen, transition, ui" />
	<meta name="author" content="Codrops" />
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/demo.css" />
	<link rel="stylesheet" type="text/css" href="css/component.css" />
	<link rel="stylesheet" type="text/css" href="css/content.css" />
	<script src="js/modernizr.custom.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/uikit@dev"></script>
</head>

<body>
	<div class="container">

		<header class="codrops-header">

			<h3>选择一项将要进行的报告</h3>
			<p>进行体检更有利于模型精确判断哦!</p>
			<nav class="codrops-demos">
				<a class="current-demo">血检报告</a>
				<a href="examFormFeeling.ejs">压力量表</a>
				<a href="examFormAction.ejs">运动量表</a>
				<a href="examFormSoul.ejs">人格测评</a>
			</nav>
		</header>
		<section>
			<p>对话式量表更有利于表达真实情感哦</p>
			<div class="morph-button morph-button-overlay morph-button-fixed">
				<button type="button">开启血检报告</button>
				<div class="morph-content">
					<!-- <div class="content-style-overlay"> -->
					<span class="icon icon-close">Close the overlay</span>
					<div class="uk-container uk-container-expend">
					<ol>
						<li>
							你是否常觉得心情很烦闷？
						</li>
						<input class=".uk-radio" type="radio" name="q1"/><label>经常-5</label>
						<input class=".uk-radio" type="radio" name="q1"/><label>普通-3</label>
						<input class=".uk-radio" type="radio" name="q1"/><label>偶尔-1</label>
						<div style="margin-top: 1%;width: 100%;"></div>

						<li>
							你是否会一个人自言自语？
						</li>
						<input class=".uk-radio" type="radio" name="q2"/><label>经常-5</label>
						<input class=".uk-radio" type="radio" name="q2"/><label>普通-3</label>
						<input class=".uk-radio" type="radio" name="q2"/><label>偶尔-1</label>
						<div style="margin-top: 1%;width: 100%;"></div>

						<li>
							心情不好的时候，你会骑车到外头透透气？
						</li>
						<input class=".uk-radio" type="radio" name="q3"/><label>经常-5</label>
						<input class=".uk-radio" type="radio" name="q3"/><label>普通-3</label>
						<input class=".uk-radio" type="radio" name="q3"/><label>偶尔-1</label>
						<div style="margin-top: 1%;width: 100%;"></div>

						<li>
							你是否曾动过自杀的念头？
						</li>
						<input class=".uk-radio" type="radio" name="q4"/><label>经常-5</label>
						<input class=".uk-radio" type="radio" name="q4"/><label>普通-3</label>
						<input class=".uk-radio" type="radio" name="q4"/><label>偶尔-1</label>
						<div style="margin-top: 1%;width: 100%;"></div>

						<li>
							觉得电视上的综艺节目越来越无聊？
						</li>
						<input class=".uk-radio" type="radio" name="q5"/><label>经常-5</label>
						<input class=".uk-radio" type="radio" name="q5"/><label>普通-3</label>
						<input class=".uk-radio" type="radio" name="q5" /><label>偶尔-1</label>
						<div style="margin-top: 1%;width: 100%;"></div>

						<li>
							即使到了度假胜地，依旧没有很开心的感觉？
						</li>
						<input  class=".uk-radio" type="radio" name="q6"/><label>经常-5</label>
						<input class=".uk-radio" type="radio" name="q6"/><label>普通-3</label>
						<input class=".uk-radio" type="radio" name="q6"/><label>偶尔-1</label>
						<div style="margin-top: 1%;width: 100%;"></div>

						<li>
							你有没有想起来很气的事情，气到几乎想杀掉他人？
						</li>
						<input class=".uk-radio" type="radio" name="q7"/><label>经常-5</label>
						<input class=".uk-radio" type="radio" name="q7" /><label>普通-3</label>
						<input class=".uk-radio" type="radio" name="q7"/><label>偶尔-1</label>
						<div style="margin-top: 1%;width: 100%;"></div>

						<li>
							你是否觉得自己常常很慵懒、身体虚弱无力，可是到医院又检查不出毛病？
						</li>
						<input class=".uk-radio" type="radio" name="q8"/><label>经常-5</label>
						<input class=".uk-radio" type="radio" name="q8"/><label>普通-3</label>
						<input class=".uk-radio" type="radio" name="q8"/><label>偶尔-1</label>
						<div style="margin-top: 1%;width: 100%;"></div>

						<li>
							遇到路上横冲直撞、不守交通规则的驾驶人，你会有怎样的反应？
						</li>
						<input class=".uk-radio" type="radio" name="q9"/><label>经常-5</label>
						<input class=".uk-radio" type="radio" name="q9"/><label>普通-3</label>
						<input class=".uk-radio" type="radio" name="q9"/><label>偶尔-1</label>
						<div style="margin-top: 1%;width: 100%;"></div>

						<li>
							觉得每天做同样的事是一件很烦的事？
						</li>
						<input class=".uk-radio" type="radio" name="q10"/><label>经常-5</label>
						<input class=".uk-radio" type="radio" name="q10"/><label>普通-3</label>
						<input class=".uk-radio" type="radio" name="q10"/><label>偶尔-1</label>
						<div style="margin-top: 1%;width: 100%;"></div>

						<li>
							你最讨厌地下哪种类型的人？
						</li>
						<input class=".uk-radio" type="radio" name="q11"/><label>个性自私自利、小气抠门的人-5</label>
						<br/>
						<input class=".uk-radio" type="radio" name="q11"/><label>喜欢夸大其实、一事无成的人-1</label>
						<br/>
						<input class=".uk-radio" type="radio" name="q11"/><label>总是固执己见、不知变通的人-3</label>
						<div style="margin-top: 1%;width: 100%;"></div>

						<li>
							你觉的自己是不是很容易陷入感情或友情的困扰？
						</li>
						<input class=".uk-radio" type="radio" name="q12"class=".uk-radio" type="radio" name="q11"/><label>很容易，常常会这样-5</label>
						<br/>
						<input class=".uk-radio" type="radio" name="q12"/><label>偶尔会，感情还不错-3</label>
						<br/>
						<input class=".uk-radio" type="radio" name="q12"/><label>不太会，感情都很好-1</label>
						<div style="margin-top: 2%;width: 100%;"></div>

					</ol>
					<p >不到20分,压力指数:30%
						20~30分,压力指数:50%
						30~40分,压力指数:70%
						超过40分,压力指数:85%以上
					</p>
				</div>
					<!-- </div> -->
				</div>
			</div><!-- morph-button -->
			<!--此处可添加隐私使用声明-->
		</section>

	</div><!-- /container -->
	<script src="js/classie.js"></script>
	<script src="js/uiMorphingButton_fixed.js"></script>
	<script>
		
		(function () {
			var docElem = window.document.documentElement, didScroll, scrollPosition;

			// trick to prevent scrolling when opening/closing button
			function noScrollFn() {
				window.scrollTo(scrollPosition ? scrollPosition.x : 0, scrollPosition ? scrollPosition.y : 0);
			}

			function noScroll() {
				window.removeEventListener('scroll', scrollHandler);
				window.addEventListener('scroll', noScrollFn);
			}

			function scrollFn() {
				window.addEventListener('scroll', scrollHandler);
			}

			function canScroll() {
				window.removeEventListener('scroll', noScrollFn);
				scrollFn();
			}

			function scrollHandler() {
				if (!didScroll) {
					didScroll = true;
					setTimeout(function () { scrollPage(); }, 60);
				}
			};

			function scrollPage() {
				scrollPosition = { x: window.pageXOffset || docElem.scrollLeft, y: window.pageYOffset || docElem.scrollTop };
				didScroll = false;
			};

			scrollFn();

			var el = document.querySelector('.morph-button');

			new UIMorphingButton(el, {
				closeEl: '.icon-close',
				onBeforeOpen: function () {
					// don't allow to scroll
					noScroll();
				},
				onAfterOpen: function () {
					// can scroll again
					canScroll();
					// add class "noscroll" to body
					classie.addClass(document.body, 'noscroll');
					// add scroll class to main el
					classie.addClass(el, 'scroll');
				},
				onBeforeClose: function () {
					// remove class "noscroll" to body
					classie.removeClass(document.body, 'noscroll');
					// remove scroll class from main el
					classie.removeClass(el, 'scroll');
					// don't allow to scroll
					noScroll();
				},
				onAfterClose: function () {
					// can scroll again
					canScroll();
				}
			});
		})();
	</script>
</body>

</html>